import { h, defineComponent } from '@vue/runtime-core';
import startPageImg from '../../assets/start_page.jpg';
import startBtnImg from '../../assets/startBtn.png';

export default defineComponent({
  // 作为 vue3 的入口函数，所有东西都要在这个函数里进行调用
  setup(props, ctx) {
    // 没有 this
    // 源码中 ctx => SetupContext => 三个参数 { attrs, slots, emit }
    // 可以 return 一个对象回去，而返回的对象会挂载到 ctx 上，然后将 ctx 传到 render

    const onClick = () => {
      // 表示要进入的组件叫 gamePage
      ctx.emit('changePage', 'GamePage')
    }

    return {
      onClick
    }
  },
  render(ctx) {
    // 首先设置开始页面的背景图片
    // <div><img src="path" /></div>
    // 使用 pixi.js

    // Container 表示外层容器
    // Sprite 表示图片 texture 表示图片路径
    return h("Container", [
      h("Sprite", {
        texture: startPageImg
      }),
      h("Sprite", {
        texture: startBtnImg,
        x: 228,
        y: 515,
        interactive: true,  // 点击开关，设置为 true 才可点击
        onClick: ctx.onClick
      })
    ])
  }
})